<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <title>IFE ECMAScript</title>
</head>
<body>        
    <div id="wrapper">
        <div id="news-top" class="section">
            <h3>Some title</h3>
            <div class="content">
                <ul>
                    <li><span>HTML</span><a href="">Some Link1</a></li>
                    <li><span>JS</span><a class="active" href="">Some Link2</a></li>
                    <li><span>CSS</span><a href="">Some Link3</a></li>
                    <li><span>JS</span><a href="">Some Link4</a></li>
                </ul>
            </div>
            <img src="">
            <p class="">Some Text</p>
        </div>
        <div id="news-normal" class="section">
            <h3>Some title</h3>
            <div class="content">
                <ul>
                    <li><span>HTML</span><a href="">Some Link1</a></li>
                    <li><span>HTML</span><a href="">Some Link2</a></li>
                    <li><span>JS</span><a class="active" href="#">Some Link3</a></li>
                    <li><span>CSS</span><a href="">Some Link4</a></li>
                </ul>
            </div>
            <img src="">
            <p class="">Some Text</p>
        </div>      
    </div>

    <button onclick="getAllListItem()">所有li标签</button>
    <button onclick="findAllHtmlSpanInOneSection('news-normal')">某个section下所有span中内容为HTML的span标签</button>
    <button onclick="findListItem('news-normal','HTML')">某个section下，所有所包含span内容为spanCont的LI标签</button>
    <button onclick="getActiveLinkContent('wrapper')">某个section下，class为active的链接中包含的文字内容</button>
    <script>

    function getAllListItem() {
        // 返回页面中所有li标签
        var li = document.getElementsByTagName('li');
        console.log(li.length);
    }

    function findAllHtmlSpanInOneSection(sectionId) {
        // 返回某个section下所有span中内容为HTML的span标签
        var sp = document.getElementById(sectionId).getElementsByTagName('span');
        console.log(sp);
    }

    function findListItem(sectionId, spanCont) {
        // 返回某个section下，所有所包含span内容为spanCont的LI标签
        var sp = document.getElementById(sectionId).getElementsByTagName('span');
        var part= [];
        for(var i =0 ;i< sp.length;i++){
            if(sp[i].innerText == spanCont){
              part.push(sp[i].parentNode)
            }
        }
        console.log(part);

    }

    function getActiveLinkContent(sectionId) {
        // 返回某个section下，class为active的链接中包含的文字内容
        var sp = document.getElementById(sectionId).getElementsByClassName('active')[0].innerText;
        console.log(sp);
    }

    </script>
</body>
</html>